<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue3 -->
    <script src="../js/vue.global.js"></script>
    <style>
        .unit{
          display: inline-block;
          /* margin: 0 4px; */
          color: #1989fa;
        }
        .colon {
          display: inline-block;
          margin: 0 4px;
          color: #1989fa;
        }
        .block {
          display: inline-block;
          min-width: 22px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #1989fa;
        }
      </style>
</head>
<body>
    <div id="app">

        <p>count:{{count}}</p>
        <p>
            <button @click="count++">count</button>
        </p>
        <hr>
        

        <lw-clock ref="myClock">
            <template v-slot:default="slotScope">
                <!-- <span>{{slotScope}}</span> -->
                <h2>{{count}}</h2>
                
                <span class="block">{{  slotScope.year }}年</span>
                <span class="block">{{ slotScope.month }}月</span>
                <span class="block">{{ slotScope.day }}日</span>  

                <span class="block">{{  slotScope.hour }}</span>
                <span class="colon">:</span>
                <span class="block">{{ slotScope.min }}</span>
                <span class="colon">:</span>
                <span class="block">{{ slotScope.sec }}</span>   
            </template>
        </lw-clock>

        <div>
            <p><button @click="pauseHandler">暂停</button> <button @click="startHandler">启动</button></p>
        </div>
    </div>

</body>

<!-- <template id="a">
    <div class="show-time">
       <slot :year="year" :month="month" :day="day" :hour="hour" :min="min" :sec="sec">
        {{year}}-{{month}}-{{day}}  {{hour}}:{{min}}:{{sec}}
        </slot>
    </div>
</template> -->


<script type="module">

    let {createApp} =  Vue;
//    console.log(Vue);

    let LwClock = {
        template:`<div class="show-time">
            <slot :year="year" :month="month" :day="day" :hour="hour" :min="min" :sec="sec">
            {{year}}-{{month}}-{{day}}  {{hour}}:{{min}}:{{sec}}
            </slot>
        </div>`,
        exposes:[""],
        data(){
            return {
                now: new Date(),
                timer: null,
            }
        },
        methods:{
            update(){
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.now = new Date();
                },1000)
            },
            stop(){
                clearInterval(this.timer);
            }
        },
        computed:{
            year(){
                return this.now.getFullYear();
            },
            month(){
                // 月份参数: 0 - 11 
                // 实际月份 = 月份参数 + 1
                var month = this.now.getMonth() + 1
                return month.toString().padStart(2,"0");
            },
            day(){
                var day = this.now.getDate()
                return day.toString().padStart(2,"0");
            },
            hour(){
                var hour = this.now.getHours();
                return   hour.toString().padStart(2,"0");
            },
            min(){
                var min =this.now.getMinutes();
                return  min.toString().padStart(2,"0");
            },
            sec(){
                var sec = this.now.getSeconds();
                return   sec.toString().padStart(2,"0");
            },
            dateOption(){
                var year = this.now.getFullYear();
                var month = this.now.getMonth() + 1;
                var day = this.now.getDate();
                var hour = this.now.getHours();
                var min =this.now.getMinutes();
                var sec = this.now.getSeconds();
                return {
                    year:year,
                    month:month.toString().padStart(2,"0"),
                    day:day.toString().padStart(2,"0"),
                    hour:hour.toString().padStart(2,"0"),
                    min:min.toString().padStart(2,"0"),
                    sec:sec.toString().padStart(2,"0"),
                }
            }
        },
        mounted () {
            this.update();
        },

        // vue3 生命周期钩子 (销毁 => 卸载  )
        // 卸载前
        beforeUnmount() {
            
        },
        // 卸载后
        unmounted() {
            this.stop();
        }
    }



    var app = createApp({
        data(){
            return {
                count:1,
            }
        },
        methods:{
            pauseHandler(){
                console.log(this.$refs.myClock);
                // this.$refs.myClock.stop();
            },
            startHandler(){
                // this.$refs.myClock.update();
            }
        },
        components: {
            LwClock,
        }
       

    })

    app.mount("#app");


    


</script>
</html>